<template>
  <div id="adminUser">

    <!-- 搜索 -->
    <a-form
    :model="formSearchParams"
    :style="{ marginBottom: '20px' }"
    layout="inline"
    @submit="doSearch"
  >
    <a-form-item field="userName" label="用户名">
      <a-input v-model="formSearchParams.userName" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item field="userProfile" label="用户简介">
      <a-input
        v-model="formSearchParams.userProfile"
        placeholder="请输入用户简介"
      />
    </a-form-item>
    <a-form-item>
      <a-button  type="primary" html-type="submit" style="width: 100px;margin-right: 20px;">
        搜索
      </a-button>
      <a-button @click="clearFormSearchParams"  style="width: 100px">
        重置
      </a-button>
    </a-form-item>
  </a-form>

    <!-- 表格 -->
    <a-table 
      :columns="columns" 
      :data="dataList" 
      :pagination="{
        showTotal: true,
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        total: total,
      }"
      @page-change="onPageChange"
    >
      <!-- 头像 -->
      <template #userAvatar="{ record }">
        <a-image width="64" :src="record.userAvatar" />
      </template>

      <!-- 时间格式 -->
      <template #createTime="{ record }">
        {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')}}
      </template>
      <template #updateTime="{ record }">
        {{ dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss')}}
      </template>

      <!-- 操作栏 -->
      <template #optional="{ record }">
        <a-space>
          <a-popconfirm @ok="doDelete(record)" :content="`确认删除${record.userAccount}吗?`">
            <a-button status="danger" type="primary">删除</a-button>
          </a-popconfirm>
          
        </a-space>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { deleteUserUsingPost, listUserByPageUsingPost } from '@/api/userController';
import { ref, watchEffect } from 'vue';
import API from '@/api';
import message from '@arco-design/web-vue/es/message';
import { dayjs } from '@arco-design/web-vue/es/_utils/date';

  // 表格列配置
  const columns = [
    {
      title: "id",
      dataIndex: "id",
    },
    {
      title: "账号",
      dataIndex: "userAccount",
    },
    {
      title: "用户名",
      dataIndex: "userName",
    },
    {
      title: "用户头像",
      dataIndex: "userAvatar",
      slotName: "userAvatar",
    },
    {
      title: "用户简介",
      dataIndex: "userProfile",
    },
    {
      title: "权限",
      dataIndex: "userRole",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      slotName: "createTime"
    },
    {
      title: "更新时间",
      dataIndex: "updateTime",
      slotName: "updateTime"
    },
    {
      title: "操作",
      slotName: "optional",
    },
  ]

  const dataList = ref<API.User[]>([])

  const total = ref<any>(0)

  // 搜索参数
  const formSearchParams = ref<API.UserQueryRequest>({})

  // 初始分页参数
  const initSearchParams = ref<API.UserQueryRequest>({
    current: 1,
    pageSize: 10
  })

  // 分页参数
  const searchParams = ref<API.UserQueryRequest>({
    ...initSearchParams.value
  })

  // 加载更多
  const loadData = async () => {
    const res = await listUserByPageUsingPost(searchParams.value)
    if(res.data.code === 0) {
      dataList.value = res.data.data?.records as API.User[]
      total.value = res.data.data?.total as any  || 0
      total.value = parseInt(total.value)

    } else {
      message.error('获取数据失败:' + res.data.message as string)
    }
  }


  const onPageChange = (page: number) => {
    searchParams.value.current = page
  }

  // 删除
  const doDelete = async (record: API.User) => {
    const res = await deleteUserUsingPost({id: record.id})
    if(res.data.code === 0) {
      loadData()
    } else {
      message.error('删除失败:' + res.data.message as string)
    }
  }

  // 搜索
  const doSearch = () => {
    searchParams.value = {
      ...initSearchParams.value,
      ...formSearchParams.value
    }
  }

  // 重置
  const clearFormSearchParams = () => {
    formSearchParams.value = {}
    searchParams.value = {
      ...initSearchParams.value,
      ...formSearchParams.value
    }

  }
  // 监听分页变化
  watchEffect(() => {
    loadData()
  })


</script>


<style lang="scss" scoped>
#adminUser {

}
</style>